1 19:09:14
<template id="table1">
    <div>
      <table border="1">
        <tr>
          <th>编号</th>
          <th>书名</th>
          <th>类型</th>
          <th>纸质</th>
          <th>出版社</th>
          <th>发行商</th>
          <th>作者</th>
          <th>发行日期</th>
          <th>单价</th>
          <th>封面</th>
          <th>书籍详情</th>
          <th>创作背景</th>
          <th>发行状态</th>
          <th>操作</th>
        </tr>
        <tr v-for="(index) in list">
          <td v-for="(value) in index">{{value}}</td>
          <td> <button @click="del(index.id)">删除</button>/
            <button @click="update(index)">修改</button></td>
        </tr>
      </table>

<!--      <img src="../assets/微信图片_20210731215732.jpg" style="display: block;margin-left: 45%">-->
      <input :value="src">
<!--      <img src="static/img/img_1.png">-->
<!--<img src="static/img/img_1.png">-->
<!--      <img src="static/img/img_2.png">-->
<!--      <img src="static/img/img_3.png">-->
<!--      <img src="../assets/img_5.jpg">-->
<!--      <img src="static/img/img.png">-->
<!--      <img src="../assets/img_1.jpg">-->
<!--      <img src="../assets/img_2.jpg">-->
<!--      <img src="../assets/img_3.jpg">-->
<!--      <img src="../assets/img_4.jpg">-->
<!--      <img src="../assets/img_5.jpg">-->
<!--      <img src="../assets/img_6.jpg">-->
<!--      <img src="../assets/img_7.jpg">-->
<!--      <img src="../assets/img_8.jpg">-->
<!--      <img src="../assets/img_9.jpg">-->
<!--      <img src="../assets/img_10.jpg">-->
<!--      <img src="../assets/img_11.jpg">-->
<!--      <img src="../assets/img_12.jpg">-->
      <el-image :src="src"></el-image>
      <el-table :data="list" stripe style="width: 100%">
        <el-table-column prop="id" label="id" width="180"/>
        <el-table-column prop="name" label="书名" width="180"/>
        <el-table-column prop="type" label="类型" width="180"/>
        <el-table-column prop="texture" label="纸质" width="180"/>
        <el-table-column prop="publisher" label="id" width="180"/>
        <el-table-column prop="brand" label="id" width="180"/>
        <el-table-column prop="author" label="id" width="180"/>
        <el-table-column prop="date" label="id" width="180"/>
        <el-table-column prop="price" label="price" width="180"/>
        <el-table-column prop="head" label="id" width="180">
          <el-image
          style="width: 100px; height: 100px"
          :src="src"
        ></el-image>
        </el-table-column>
        <el-table-column prop="brief" label="id" width="180"/>
        <el-table-column prop="detail" label="id" width="180"/>
        <el-table-column prop="state" label="id" width="180"/>
<!--        <el-table-column prop="name" label="Name" width="180" />-->
<!--        <el-table-column prop="address" label="Address" />-->
      </el-table>

      <div>
        <form>
          书名: <input v-model="book.name"/><br>
          类型:<input v-model="book.type"><br>
          纸质:<input v-model="book.texture"><br>
          出版社：<input v-model="book.publisher"><br>
          发行商：<input v-model="book.brand"><br>
          作者:<input v-model="book.author"><br>
          日期：<input v-model="book.date"><br>
          单价：<input v-model="book.price"><br>
          封面：<input v-model="book.head"><br>
          书籍详情:<input v-model="book.brief"><br>
          创作背景:<input v-model="book.detail"><br>
          状态:<input v-model="book.state"><br>
          <button type="submit" @click="add()">提交</button>
        </form>
      </div>
      <div>
      <form>
        id:<input  v-model="book1.id" /><br>
        书名: <input v-model="book1.name"/><br>
        类型:<input v-model="book1.type"><br>
        纸质:<input v-model="book1.texture"><br>
        出版社：<input v-model="book1.publisher"><br>
        发行商：<input v-model="book1.brand"><br>
        作者:<input v-model="book1.author"><br>
        日期：<input v-model="book1.date"><br>
        单价：<input v-model="book1.price"><br>
        封面：<input v-model="book1.head"><br>
        书籍详情:<input v-model="book1.brief"><br>
        创作背景:<input v-model="book1.detail"><br>
        状态:<input v-model="book1.state"><br>
        <button type="submit" @click="upd()">提交</button>

        <el-row class="mb-4">
          <el-button disabled>Default</el-button>
          <el-button type="primary" disabled>Primary</el-button>
          <el-button type="success" disabled>Success</el-button>
          <el-button type="info" disabled>Info</el-button>
          <el-button type="warning" disabled>Warning</el-button>
          <el-button type="danger" disabled>Danger</el-button>
        </el-row>

        <el-row>
          <el-button plain disabled>Plain</el-button>
          <el-button type="primary" plain disabled>Primary</el-button>
          <el-button type="success" plain disabled>Success</el-button>
          <el-button type="info" plain disabled>Info</el-button>
          <el-button type="warning" plain disabled>Warning</el-button>
          <el-button type="danger" plain disabled>Danger</el-button>
        </el-row>
      </form>
      </div>
    </div>


</template>

<script >
import axios from 'axios'

export default {
  name: 'BooksManager',
  data () {
    return {
      list: [],
      book1:{id:"",name:"",type:"",texture:"",publisher:"",brand:"",author:"",date:"",price:"",head:"",brief:"",detail:"",state:""},
      book:{name:"",type:"",texture:"",publisher:"",brand:"",author:"",date:"",price:"",head:"",brief:"",detail:"",state:""},
      src:'../assets/img.png',
      fits :['fill', 'contain', 'cover', 'none', 'scale-down']
    }
  },
 // src:'../assets/微信图片_20210731215732.jpg',
  components:{
    "table1":{
      template:"table1",
      props:{
        list:[],
        title:""
      }
    }
  },
  created() {
    this.$http.post('orderservice/book/find').then(data=>{
      alert("1"+data)
      this.list = data;
    })
  },
  methods: {
    del (id) {
      //alert(id);
      // var params = new URLSearchParams();
      // params.append('id', '70');
      this.book1.id = id;
      //alert(id);
      this.$http.post("/book/delete", this.book1);
      //$.post("http://localhost:8080/texture/select");
      window.location.reload();
    },
    add () {
      this.$http.post("/book/insert", this.book).then(add => {
        //alert(add);
        if (add > 0) {
          alert("添加成功");
          window.location.reload();
        } else {
          alert("添加失败")
        }
      })
    },
    update (item) {
      this.book1.id = item.id;
      this.book1.name = item.name;
      this.book1.type = item.type;
      this.book1.texture = item.texture;
      this.book1.publisher = item.publisher;
      this.book1.brand = item.brand;
      this.book1.author = item.author;
      this.book1.date = item.date;
      this.book1.price = item.price;
      this.book1.head = item.head;
      this.book1.brief = item.brief;
      this.book1.detail = item.detail;
      this.book1.state = item.state;
    },
    upd () {
      this.$http.post("/book/update", this.book1).then(add => {
        //alert(add);
        if (add > 0) {
          alert("修改成功");
          window.location.reload();
        } else {
          alert("修改失败")
        }
      });
    }
  }
}
</script>

<style scoped>

</style>

<!--<th>编号</th>-->
<!--<th>姓名</th>-->
<!--<th>性别</th>-->
<!--<th>电话</th>-->
<!--<th>邮件</th>-->
<!--<th>密码</th>-->
<!--<th>身份证</th>-->
<!--<th>状态</th>-->
<!--<th>操作</th>-->
